<template>
  <div class="login-container">
    <image src="https://www.wantongkonggu.cn/crmebimage/profile/upload/2025/08/20/bgbg4_20250820150958A004.png" class="logo-top"></image>

    <div class="logo-container">
      <image src="https://www.wantongkonggu.cn/crmebimage/profile/upload/2025/03/17/huanying_20250317150039A009.png" class="welcome-image"></image>
      <span class="welcome-text">登录账号即可查看更多精彩资讯</span>
    </div>

    <div class="login-form-container">
      <!--  <image src="" class="form-background"></image>

      <view class="login-tabs">
        <span class="tab">免密登录</span>
        <span class="tab active">账号登录</span>
      </view> -->

      <view class="form-content">
        <div class="input-group">
          <div class="input-label">账号</div>
          <div class="captcha-wrapper">
            <div class="input-wrapper captcha-input-wrapper">
              <image src="https://www.wantongkonggu.cn/crmebimage/profile/upload/2025/03/17/zhanghao_20250317150010A008.png" class="input-icon"> </image>
              <input maxlength="11" type="text" v-model="phoneNum" class="input-field" placeholder="请输入账号" />
            </div>
          </div>
        </div>

        <div class="input-group">
          <div class="input-label">密码</div>
          <div class="captcha-wrapper">
            <div class="input-wrapper captcha-input-wrapper">
              <image src="https://www.wantongkonggu.cn/crmebimage/profile/upload/2025/03/17/mima_20250317145953A007.png" class="input-icon"> </image>
              <input type="password" v-model="password" class="input-field" placeholder="请输入密码" />
            </div>
          </div>
        </div>

        <div class="input-group">
          <div class="input-label">验证码</div>
          <div class="captcha-wrapper">
            <div class="input-wrapper captcha-input-wrapper">
              <input maxlength="6" v-model="loginCode" class="input-field" placeholder="请输入验证码" />
            </div>
            <image :src="imgCode" class="captcha-image" @click="getImgCode"></image>
          </div>
        </div>
      </view>
      <view class="button-container">
        <button class="login-button" :class="{ disabled: !isFormValid }" :loading="loading" @click="loginFun">
          {{ loading ? '登录中...' : '立即登录' }}
        </button>
      </view>
    </div>
  </div>
</template>

<script>
import { adminApph6login, complaintUpdate } from '../../utils/request_doc.js';
import { getUserInfo } from '../../utils/request_sh.js';
import { getInfo } from '../../utils/login.js';

export default {
  data() {
    return {
      phoneNum: '',
      password: '',
      imgCode: '',
      loginKey: '',
      loginCode: '',
      loading: false
    };
  },

  computed: {
    isFormValid() {
      return this.phoneNum && this.password && this.loginCode;
    }
  },

  onShow() {
    const userInfo = uni.getStorageSync('userInfo');
    if (userInfo) {
      uni.switchTab({
        url: '/pages_sh/hdIndexGys/index'
      });
    }
  },

  mounted() {
    this.getImgCode();
  },

  methods: {
    // 获取验证码
    getImgCode() {
      complaintUpdate()
        .then((res) => {
          if (res.code === 200) {
            this.imgCode = res.data.code;
            this.loginKey = res.data.key;
          } else {
            uni.showToast({
              title: '获取验证码失败',
              icon: 'none'
            });
          }
        })
        .catch((err) => {
          console.error('获取验证码错误:', err);
          uni.showToast({
            title: '网络错误，请重试',
            icon: 'none'
          });
        });
    },

    // 登录功能
    async loginFun() {
      // 表单验证
      if (!this.phoneNum) {
        uni.showToast({ title: '请输入账号', icon: 'none' });
        return;
      }

      if (!this.password) {
        uni.showToast({ title: '请输入密码', icon: 'none' });
        return;
      }

      if (!this.loginCode) {
        uni.showToast({ title: '请输入验证码', icon: 'none' });
        return;
      }

      // 防止重复点击
      if (this.loading) return;

      this.loading = true;

      const params = {
        account: this.phoneNum,
        autoLogin: false,
        code: this.loginCode,
        key: this.loginKey,
        pwd: this.password,
        rememberPassword: false,
        wxCode: ''
      };

      try {
        const res = await adminApph6login(params);

        if (res.code !== 200) {
          // 刷新验证码
          this.getImgCode();

          uni.showToast({
            title: res.message || '登录失败',
            icon: 'none'
          });
          return;
        }

        // 存储用户信息
        uni.setStorageSync('userInfo', res.data);

        // 获取用户详细信息
        try {
          const infoRes = await getInfo({ token: res.data.token });
          if (infoRes.code === 200) {
            uni.setStorageSync('userInfoToken', infoRes.data);
            getUserInfo(res.data.merId).then((res) => {
              uni.setStorageSync('shUserInfo', res.data);
            });
          } else {
            uni.showToast({
              title: '获取用户信息失败',
              icon: 'none'
            });
          }
        } catch (err) {
          console.error('获取用户信息时发生错误：', err);
          uni.showToast({
            title: '获取用户信息时发生错误',
            icon: 'none'
          });
        }

        uni.setStorageSync('merId', res.data.merId);
        uni.switchTab({
          url: '/pages_sh/hdIndexGys/index'
        });
      } catch (err) {
        console.error('登录请求时发生错误：', err);
        uni.showToast({
          title: '登录请求失败，请稍后重试',
          icon: 'none'
        });
      } finally {
        this.loading = false;
      }
    }
  }
};
</script>

<style scoped>
.login-container {
  width: 100%;
  margin: 0 auto;
  height: 100vh;
  position: relative;
  background: rgb(255, 255, 255);
}

.logo-top {
  width: 100%;
  height: 328px;
}

.logo-container {
  width: 85%;
  /* margin-top: -410rpx; */
  display: flex;
  margin-left: 60rpx;
  flex-direction: column;
  align-items: flex-start;
  position: absolute;
  top: 100px;
  left: 0;
}

.welcome-image {
  width: 288rpx;
  height: 68rpx;
}

.welcome-text {
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 28rpx;
  color: #8a8a8a;
  line-height: 33rpx;
  text-align: left;
  font-style: normal;
  margin-top: 20rpx;
}

.login-form-container {
  border-radius: 20px 20px 0 0;
  background: rgb(255, 255, 255);
  margin-top: -140rpx;
  z-index: 9;
  position: relative;
}

.form-background {
  width: 100%;
}

.login-tabs {
  display: flex;
  justify-content: space-between;
  padding: 0 120rpx;
  margin-top: -660rpx;
}

.tab {
  font-size: 28rpx;
  color: #999;
}

.tab.active {
  color: #ff7c02;
  font-weight: bold;
}

.form-content {
  padding: 40rpx 44rpx;
}

.input-group {
  margin-bottom: 36rpx;
}

.input-label {
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 28rpx;
  color: #333333;
  line-height: 40rpx;
  text-align: left;
  font-style: normal;
  margin-bottom: 16rpx;
}

.input-wrapper {
  background-color: #f5f5f5;
  border-radius: 16rpx;
  padding: 0 24rpx;
  display: flex;
  align-items: center;
  height: 88rpx;
  box-sizing: border-box;
  border: 2rpx solid transparent;
  transition: all 0.3s;
}

.input-wrapper:focus-within {
  border-color: #ff7c02;
  background-color: #ffffff;
  box-shadow: 0 0 8rpx rgba(255, 124, 2, 0.3);
}

.input-field {
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 28rpx;
  color: #333333;
  background: transparent;
}

.input-field::placeholder {
  color: #f1f4f9;
}

.captcha-wrapper {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.captcha-input-wrapper {
  flex: 1;
}

.captcha-image {
  width: 220rpx;
  height: 88rpx;
  border-radius: 16rpx;
  cursor: pointer;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.button-container {
  padding-top: 120rpx;
  margin: 0 auto;
  width: 90%;
}

.login-button {
  border-radius: 45rpx;
  height: 88rpx;
  background: #4780f0;
  font-family: PingFangSC, PingFang SC;
  font-weight: 600;
  font-size: 32rpx;
  color: #ffffff;
  line-height: 88rpx;
  text-align: center;
  font-style: normal;
  border: none;
  box-shadow: 0 12rpx 20rpx rgba(12, 90, 235, 0.3);
}

.login-button.disabled {
  background: #dddddd;
  box-shadow: none;
}

.register-link {
  margin-top: 50rpx;
  text-align: center;
  font-size: 13px;
  color: #999;
  letter-spacing: 3px;
  cursor: pointer;
}
.input-icon {
  width: 36rpx;
  height: 32rpx;
  margin-right: 24rpx;
}
</style>
